import axios from 'axios'
import { Message } from 'element-ui'
import store from '@/store'
import router from '@/router'
const service = axios.create({
  // process.env是node.js内置的固定环境变量对象
  // npm run dev->启动开发服务，项目根目录，.env.development环境变量配置文件里的值，添加到process.env对象上
  // npm run build：prod->启动打包服务，项目根目录，.env.production环境变量配置文件里的值，添加到process.env对象上

  // 问题：为什么不直接写在这里？
  // 答案：开发的时候，用的是基地址1.上线的时候用的是基地址2

  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000
})

service.interceptors.request.use(
  config => {
    // const token = store.state.user.token // 因为分模块了 要加模块名
    const token = store.getters.token
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}` // 后台解析的方法要求必须前面拼接一个Bearer和空格的字符串
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

service.interceptors.response.use(

  response => {
    // 因为后台成功/失败都是200，如何区分成功和失败呢？用success字段
    // response参数是axios响应对象(里面有config/header/status/data/request字段)
    // (第二个)data字段里对应的才是后台返回的全部数据，也是一个对象，在respose里的
    // 第一个data是axios自带的
    // 状态码2xx/3xx时进这里
    const { success, message } = response.data
    if (success) {
      return response.data // 返回给逻辑页面的直接是后台的完整的数据对象，不再是axios封装的respose对象(防止逻辑页面.两次data)
    } else {
      // 逻辑失败，把后台返回的message提示文字返回到提示页面
      // 返回promise的reject拒绝状态(await无法接收，如果有try+catch就进catch里)
      Message.error('message')
      return Promise.reject(message)
    }
  },
  error => {
    // 状态码4xx/5xx时进这里
    // 如果后台返回了响应数据，我们就用一下，如果没有，就用error对象本身message的值
    // &&为了防止null.data报错
    // console.dir(error) dir：详细打印

    Message.error(error.response && error.response.data && error.response.data.message || error.message)
    // console.dir(error)
    // 上面是报错就提示，下面是具体的分析
    // 可以通过http状态码来判断error.respose.status===401
    // 或者还可以用code码逻辑码来判断(100002是和后台商定的固定值，他就代码token过期)
    // ?.(可选链操作符-左侧有值，才会往下去点属性-防止空值去点任意的属性报错)
    if (error?.response?.data?.code === 10002) {
      // 前端token过期，要在前端做些什么---清空token/清空用户信息(很彻底)
      // (1)清空token---vuex和本地都得清除
      // (2)清空用户信息
      // (3)强制跳转到登录页
      store.dispatch('user/loginoutActions') // 在user/actions内发请求，请求回来之后在
      // router.replace('/login')
      // 返回login页面(也要被动退出时，所在页面的路由地址字符串传递给登录页面)
      router.replace(`/login?redirect=${router.currentRoute.fullPath}`)
    }
    return Promise.reject(error)
  }
)

export default service
